<template>
  <div class="hamburger">
    <Icon :type="icon" :style="{ fontSize: '14px' }" @click="toggleClick" />
    <div class="hamburger__home">
      <!--  回到首页 -->
      <Icon type="HomeOutlined" :style="{ fontSize: '14px' }"></Icon>
    </div>
  </div>
</template>
<script setup>
import Icon from '@/components/Icon/index.vue'
import { useStore } from 'vuex'
import { computed } from 'vue'
const store = useStore()

const toggleClick = () => {
  store.commit('app/triggerSidebarOpened')
}
const icon = computed(() => {
  return store.getters.sidebarOpened ? 'MenuFoldOutlined' : 'MenuUnfoldOutlined'
})
</script>
<style scoped lang="scss">
@import '@/styles/mixin';
.hamburger {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  &__home {
    margin-left: 10px;
    height: 100%;
    width: 30px;
    align-items: center;
    text-align: center;
    @include itemHover;
  }
}
</style>
